<template>
	<div class="w1400">
		<div class="tdcl">
			<div class="list">
				<div class="tit">案例展示</div>
				<div class="con case_list">
					<ul>
						<li v-for="index in 8">
							<a @click="jump('caseDetails')">
								<div class="img"><img
										src="https://xystcdn.xydec.com.cn//uploads/case/20220716/38d18bba0f3b72e73eb38c7f825c3679.jpg"
										class="lazy"></div>
								<div class="vr" onclick="window.open('')" style="display: none">VR参观</div>
								<div class="conc">
									<div class="titc">新中式风格</div>
									<div class="infoc">新中式 &nbsp;|&nbsp; 280平米 &nbsp;|&nbsp; 别墅</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

	</div>
</template>

<script setup>
	import {
		useRouter
	} from 'vue-router'; // 引入 useRouter

	const router = useRouter(); // 获取路由实例
	const jump = (path) => {
		router.push({
			name: path
		}); // 使用 router 实例进行跳转
	}
</script>

<style scoped lang="less">
	.w1400 {
		width: 1400px;
		margin: 0 auto;
		padding: 50px 0;
	}

	.tdcl .list {
		margin-bottom: 35px;
	}

	.tdcl .list .tit {
		padding-left: 16px;
		line-height: 40px;
		font-size: 28px;
		color: #000000;
		position: relative;
		z-index: 1;
		margin-bottom: 25px;
	}

	.tdcl .list .tit:before {
		content: "";
		position: absolute;
		left: 0;
		top: 9px;
		height: 25px;
		width: 3px;
		background: #e50120;
		transition: all 0.3s ease-in-out 0s;
	}


	.tdcl .list .con ul {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}

	.tdcl .list .con ul li a {
		display: block;
		cursor: pointer;
		background: #fff;
		position: relative;
		z-index: 1;
		background: url(https://xystcdn.xydec.com.cn/static/xy2022/images/tdetail_vr_jt_on.png) no-repeat 90% 90% #fff;
	}

	.tdcl .list .con ul li a .img {
		width: 100%;
		overflow: hidden;
		background: #f1f1f1;
	}

	.tdcl .list .con ul li a .img img {
		width: 100%;
		display: block;
		-webkit-transition: all ease .3s;
		transition: all ease .3s
	}

	.tdcl .list .con ul li a .vr {
		width: 100px;
		height: 35px;
		background: url(https://xystcdn.xydec.com.cn/static/xy2022/images/tdetail_vr_icon.png) no-repeat 10px 50%;
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		font-size: 14px;
		color: #fff;
		padding-left: 38px;
		line-height: 35px;
	}

	.tdcl .list .con ul li a .conc {
		padding: 15px 18px 18px 18px;
	}

	.tdcl .list .con ul li a .conc .titc {
		font-size: 18px;
		line-height: 32px;
		color: #272727;
	}

	.tdcl .list .con ul li a .conc .infoc {
		font-size: 14px;
		color: #999999;
		line-height: 30px;
	}

	.tdcl .list .con ul li a:hover {
		background: url(https://xystcdn.xydec.com.cn/static/xy2022/images/tdetail_vr_jt.png) no-repeat 90% 90% #fff;
		box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
	}

	.tdcl .list .con ul li a:hover .img img {
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
	}
</style>